<template>
    <div>

        <div class="good-list">
           
           <!-- 遍历数据 -->
            <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="goDetail(item.id)">
                <img :src="item.img_url" alt="">
                <h1 class="title">{{item.title}}</h1>
                <div class="info">
                    <p class="price">
                        <span class="now">{{item.sell_price}}</span>
                        <span class="old">{{item.market_price}}9</span>  
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩{{item.stock_quantity}}件</span>
                    </p>
                </div>
            </div>
             <mt-button type="danger" size="large" @click="getMore()">加载更多</mt-button>

            <!-- <div class="goods-item">
                <img src="../../images/phone1.jpg" alt="">
                <h1 class="title">小米(MI)小米Note 16G双网通版</h1>
                <div class="info">
                    <p class="price">
                        <span class="now">￥899</span>
                        <span class="old">￥999</span>  
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60件</span>
                    </p>
                </div>
            
            </div>
            <div class="goods-item">
                <img src="../../images/phone2.jpg" alt="">
                <h1 class="title">小米(MI)小米Note 16G双网通版</h1>
                <div class="info">
                    <p class="price">
                        <span class="now">￥899</span>
                        <span class="old">￥999</span>  
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60件</span>
                    </p>
                </div>
            
            </div>
             <div class="goods-item">
                <img src="../../images/phone2.jpg" alt="">
                <h1 class="title">小米(MI)小米Note 16G双网通版</h1>
                <div class="info">
                    <p class="price">
                        <span class="now">￥899</span>
                        <span class="old">￥999</span>  
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60件</span>
                    </p>
                </div>
            
            </div>
            <div class="goods-item">
                <img src="../../images/phone1.jpg" alt="">
                <h1 class="title">小米(MI)小米Note 16G双网通版</h1>
                <div class="info">
                    <p class="price">
                        <span class="now">￥899</span>
                        <span class="old">￥999</span>  
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60件</span>
                    </p>
                </div>
            
            </div>
            <div class="goods-item">
                <img src="../../images/phone1.jpg" alt="">
                <h1 class="title">小米(MI)小米Note 16G双网通版</h1>
                <div class="info">
                    <p class="price">
                        <span class="now">￥899</span>
                        <span class="old">￥999</span>  
                    </p>
                    <p class="sell">
                        <span>热卖中</span>
                        <span>剩60件</span>
                    </p>
                </div>
            
            </div> -->
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return {
          pageIndex:1,//分页的页数，默认为1
          goodsList:[
              {id:1,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:0,img_url:'/src/images/phone1.jpg',sell_price:3999,market_price:4699,stock_quantity:100},
              {id:2,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:4,img_url:'/src/images/phone2.jpg',sell_price:2000,market_price:5699,stock_quantity:60},
              {id:3,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:0,img_url:'/src/images/phone1.jpg',sell_price:3999,market_price:4699,stock_quantity:20},
              {id:4,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:5,img_url:'/src/images/phone2.jpg',sell_price:1899,market_price:2688,stock_quantity:68},
              {id:5,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:3,img_url:'/src/images/phone2.jpg',sell_price:3999,market_price:4699,stock_quantity:60},
              {id:6,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:2,img_url:'/src/images/phone1.jpg',sell_price:4576,market_price:6879,stock_quantity:90},
              {id:7,title:"华为荣耀6plus 64G 双卡双待 三摄",add_time:"2019-04-08",zhaiyao:"荣耀6Plus,该机型分为两款型号，分别为PE-",click:8,img_url:'/src/images/phone2.jpg',sell_price:3900,market_price:4600,stock_quantity:70}
          ] //商品数据

        }
    },
    methods:{
        getGoodsList(){
            //获取商品数据
            this.$http.get("api/getGoodsList?pageIndex="+this.pageIndex).then(result=>{
                if(result.body.status==0){
                    // 先拼接，在赋值
                    this.goodsList = this.goodsList.concat(result.body.message);
                    // this.goodsList = result.body.message;
                }
            })
        },
        getMore(){
            this.pageIndex++;
            this.getGoodsList();
        },
        goDetail(id){
          this.$router.push("/home/goodsInfo/"+id);
        }
    }
}
</script>
<style lang="scss" scoped>
   .good-list{
      display: flex;
      flex-wrap: wrap;
      padding:8px;
      justify-content: space-between;
      .goods-item{
          width:49%;
          border:1px solid #ccc;
          box-shadow:0 0 8px #ccc;
          margin:4px 0;
          padding:2px;
          display: flex;
          flex-direction: column;
          justify-content:space-between;
          min-height:293px;
          img{
              width:100%;
          }
          .title{
              font-size:14px;
          }
          .info{
              background:#eee;
              p{
                   margin:0;
                   padding:5px;
              }
              .price{
                  .now{
                      color:#f00;
                      font-size:16px;
                      font-weight:bold;
                  }
                  .old{
                      text-decoration: line-through;
                      font-size:12px;
                      margin-left:10px;
                  }
              }
              .sell{
                  display: flex;
                  justify-content: space-between;
                  font-size:12px;

              }

          }
      }

   }
</style>
